import { useState } from 'react';
import { getData5 } from '../Data'
import { useMount } from 'ahooks';

import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";

const WijmoJ01 = () => {

    const [Data, setData] = useState()
    useMount(() => { setData(getData5(100)) })


    if (Data) {
        return (
            <div className="Page">
                <FlexGrid itemsSource={Data} allowMerging="Cells" isReadOnly={true} alternatingRowStep={0}>
                    <FlexGridColumn binding="id" header="ID" width={60} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" allowMerging={true} />
                    <FlexGridColumn binding="product" header="Product" allowMerging={true} />
                    <FlexGridColumn binding="sales" header="Sales" />
                    <FlexGridColumn binding="expenses" header="Expenses" />
                </FlexGrid>
                <div> allowMerging : true  所在列自动合并</div>
            </div>
        )
    }

};

export default WijmoJ01